<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="<{'static/css/bootstrap/bootstrap.min.css'|url}>" />
		<link rel="stylesheet" href="<{'static/css/bootstrap/bootstrap-responsive.min.css'|url}>" />
		<!--[if lt IE 6]> <link rel="stylesheet" href="<{'static/css/bootstrap/bootstrap-ie6.min.css'|url}>" /> <![endif]-->
		<link rel="stylesheet" href="<{'static/css/unicorn.login.css'|url}>" />
		<{include file='html.tpl'}>
		<script src="<{'static/js/jquery.input.placeholder.js'|url}>"></script>
	</head>
	<body> 
		<div id="logo">
			<img src="<{'static/img/logo.png'|url}>" alt="" />
		</div>
		<div id="loginbox">
			<form id="loginform" class="form-vertical" action="<{'auth/login_query'|url}>" method="POST" />
				<p> 登錄 </p>
				<div class="control-group">
					<div class="controls">
						<div class="input-prepend">
							<span class="add-on"><i class="icon-user"></i></span><input type="text" name="username" placeholder="用戶名" />
						</div>
					</div>
				</div>
				<div class="control-group">
					<div class="controls">
						<div class="input-prepend">
							<span class="add-on"><i class="icon-lock"></i></span><input type="password" name="password" placeholder="密碼" />
						</div>
					</div>
				</div>
				<div class="control-group">
					<div class="controls">
						<div class="input-prepend">
							<span class="add-on"><i class="icon-lock"></i></span><input type="text" class="captcha" name="captcha" id="captcha-input" placeholder="驗證碼" />
							<span class="captcha-image"><img src="<{'captcha'|url:null:true}>"  alt="看不清，點擊刷新驗證碼" title="看不清，點擊刷新驗證碼" width="60" height="25" id="captcha-image" onclick="javascript:this.src='<{'captcha'|url}>?_=' + Math.random();jQuery('#captcha-input').focus();return false;" /></span>
						</div>
					</div>
				</div>
				<div class="form-actions">
					<!--<span class="pull-left"><a href="javascript:" class="flip-link" id="to-recover">找回密碼?</a></span>-->
					<span class="pull-right"><input type="submit" class="btn btn-inverse" value="登錄" /></span>
				</div>
			</form>
			<form id="recoverform" action="#" class="form-vertical" />
				<p>找回密碼</p>
				<div class="control-group">
					<div class="controls">
						<div class="input-prepend">
							<span class="add-on"><i class="icon-envelope"></i></span><input type="text" placeholder="E-mail address" />
						</div>
					</div>
				</div>
				<div class="form-actions">
					<span class="pull-left"><a href="#" class="flip-link" id="to-login">&lt; Back to login</a></span>
					<span class="pull-right"><input type="submit" class="btn btn-inverse" value="Recover" /></span>
				</div>
			</form>
		</div>
<script type="text/javascript">
(function($){
$().ready(function(){
	var login = $('#loginform');
	var recover = $('#recoverform');
	var speed = 400;

	$('#to-recover').click(function(){
		login.fadeTo(speed,0.01).css('z-index','100');
		recover.fadeTo(speed,1).css('z-index','200');
	});

	$('#to-login').click(function(){
		recover.fadeTo(speed,0.01).css('z-index','100');
		login.fadeTo(speed,1).css('z-index','200');
	});

	login.query(function(json){
		switch(json.result) {
			case 'error':
				$('[name="password"]',this).val('');
			case 'failure':
				$('[name="captcha"]',this).val('');
				$('#captcha-image').trigger('click'); //重新獲取驗證碼
				break;
			case 'success':
			default:
				break;
		}
	});
		
});
})(jQuery);
</script>
	</body>
</html>
